<template>
  <div class="dev-statis">
    <el-row :gutter="15">
      <el-col :span="4" class="type-hover">
        <div class="card-data-item" @click="showLists(0)">
          <p class="title"><i class="iconfont icon-msnui-pc"/> 销售电商</p>
          <p class="sum">{{ type0 }}
            <small>家</small>
          </p>
          <p class="item-bottom">
            <!--<i class="iconfont icon-up" />{{ debStatis.devCountGrowRate }}%较上月增加{{ debStatis.devCountPreMonthAdd }}台-->
          </p>
        </div>
      </el-col>
      <el-col :span="4" class="type-hover">
        <div class="card-data-item" @click="showLists(2)">
          <p class="title"><i class="iconfont icon-msnui-pc"/> 重点基地</p>
          <p class="sum">{{ type2 }}
            <small>家</small>
          </p>
          <p class="item-bottom">
            <!--10% 较上月增加23台-->
            <!--目前在线终端-->
          </p>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="card-data-item">
          <p class="title"><i class="iconfont icon-bofang"/> 总销售额</p>
          <p class="sum">{{ money }}
            <small>万元</small>
          </p>
          <p class="item-bottom">
            <!--<i class="iconfont icon-up" />{{ debStatis.videoCountGrowRate }}%较上月增加{{ debStatis.videoCountPreMonthAdd }}个-->
          </p>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="card-data-item">
          <p class="title"><i class="iconfont icon-shijian"/> 订单数</p>
          <p class="sum">{{ order }}
            <small>单</small>
          </p>
          <p class="item-bottom">
            <!--<i class="iconfont icon-up" />{{ debStatis.videoViewTimesGrowRate }}%较上月增加{{ debStatis.videoViewTimesPreMonthAdd }}小时-->
          </p>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="card-data-item">
          <p class="title"><i class="iconfont icon-ren"/> 客户满意度</p>
          <p class="sum">{{ degree }}
            <small>%</small>
          </p>
          <p class="item-bottom">
            <!--<i class="iconfont icon-up" />{{ debStatis.signonCountGrowRate }}% 较上月增加{{ debStatis.signonCountPreMonthAdd }}人-->
          </p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

  export default {
    components: {},
    props: ['type0', 'type2', 'money', 'order', 'degree'],
    data() {
      return {
        debStatis: {}
      }
    },
    mounted() {
    },
    methods: {
      showLists(num) {
        this.$emit('showLists', num)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss" type="text/scss">
  .dev-statis {
    /*border: 1px solid #00bfa5;*/

    .card-data-item {
      background-image: linear-gradient(-180deg, #00bfa5 0%, #00796b 100%);
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
      border-radius: 10px;

      .title {
        color: #fff;
        padding: 5px 10px;

        i {
          font-size: 14px;
        }

      }

      .sum {
        /*font-size: 36px;*/
        color: #fff;
        text-align: center;
        font-weight: 700;
        position: relative;
        top: -3px;

        small {
          font-size: 14px;
        }

      }

      .item-bottom {
        text-align: center;
        background: #00796b;
        color: #00bfa5;
        border-radius: 0 0 10px 10px;
        font-size: 12px;
        min-height: 20px;
        line-height: 20px;
      }

    }
  }

  .type-hover {
    cursor: pointer;
  }

  .type-hover:hover {
    opacity: 0.8;
  }

</style>
